<template>

  <div class="homeContent" v-if="active !== ''">
     <van-nav-bar
      class="title"
      title="政务·城市内涝治理"
      style="width: 100%; height: 44px"
    />
    <div class="homeTabs">
       <van-tabs v-model:active="active" @click-tab="changeTab"
        > <van-tab
          :title="item.title"
          :name="item.title"
          v-for="(item, index) in tabs"
          :key="index"
        ></van-tab
        > </van-tabs
      >
    </div>

    <div class="homeLists">
       <template v-if="active == '处置工单'"
        > <van-floating-bubble
          v-model:offset="offset"
          axis="xy"
          :gap="0"
          @click="quickReporting"
          class="home-floating-bubble"
          >快处<br />上报</van-floating-bubble
        > </template
      > <component :is="myComponent" ref="listRef"></component>
    </div>

  </div>

</template>

<script setup lang="ts">
  import { ref, onMounted, watch } from 'vue'
  import { useRoute, useRouter } from 'vue-router'
  import workOrder from './components/workOrder.vue'
  import responseTicket from './components/responseTicket.vue'
  import patrolTicket from '@/views/patrolWorkOrder/ticketList.vue'
  import maintainTicket from '@/views/maintainWorkOrder/ticketList.vue'
  import repairTicket from '@/views/repairWorkOrder/ticketList.vue'
  const router = useRouter()
  const route = useRoute()
  const tabs = [
    {
      title: '处置工单',
      type: 'dispose',
      component: workOrder,
    },
    {
      title: '响应工单',
      type: 'response',
      component: responseTicket,
    },
    {
      title: '巡查工单',
      type: 'patrol',
      component: patrolTicket,
    },
    {
      title: '养护工单',
      type: 'maintain',
      component: maintainTicket,
    },
    {
      title: '维修工单',
      type: 'repair',
      component: repairTicket,
    },
  ]
  const myComponent = ref()
  const active = ref('')
  const changeTab = (val) => {
    const { title } = val
    const cur = tabs.find((item) => item.title === title)
    router.push({
      path: '/home',
      query: {
        type: cur?.type,
      },
    })
  }

  const offset = ref({ x: 20, y: window.innerHeight - 140 })
  const quickReporting = () => {
    router.push('/quickReporting')
  }

  watch(
    () => route.query,
    (val) => {
      const { type } = val
      const cur = tabs.find((item) => item.type === type)
      active.value = cur?.title || tabs[0].title
      myComponent.value = cur?.component || tabs[0].component
    },
    {
      immediate: true,
      deep: true,
    },
  )
</script>

<style scoped lang="less">
  .homeContent {
  background: #f7f8f7;
  text-align: center;
  .homeTabs {
    height: 45px;
    width: 100%;
  }
  .homeLists {
    height: calc(100vh - 95px);
  }
}

.title {
  font-family: PingFang TC, PingFang TC;
  font-weight: 600;
  font-size: 18px;
  color: rgba(0, 0, 0, 0.9);
}
</style>

